<template>
	<view>
		<u-modal v-model="isAuthShow" :show-title="false" :show-confirm-button="false" :show-cancel-button="false"
			:zoom="false">
			<view class="page">
				<view class="logo-box">
					<image :src="appinfo.logo" />
					<view class="title">{{appinfo.name}}</view>
				</view>
				<view class="show-text-box">
					<view class="text-name">需要您的授权才能正常使用哦！</view>
					<view class="text-info">请允许我们获得您的公开资讯</view>
					<view class="text-info">我们不会公布您的这些信息</view>
					<view class="text-info">只是为了给您提供更好的服务</view>
				</view>
				<view class="wxaubtn">
					<!-- #ifndef MP-ALIPAY -->
					<button v-if="canIUseGetUserProfile" :app-parameter="true" @click="getUserProfile"> 授权登录 </button>
					<!-- #endif -->
					<!-- #ifdef MP-ALIPAY -->
					<button type="success" :app-parameter="true" :loading="onClick" :disabled="onClick"
						@click="getUserInfo" open-type="getAuthorize" scope="userInfo">授权登录1</button>
					<!-- #endif -->

					<view class="u-m-t-30">
						<text class="canceBtn" @click="cancelAuth">取消授权</text>
					</view>
				</view>
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>

</template>

<script>
	export default {
		props: {
			isAuthShow: {
				type: Boolean,
				default: false
			},
			jumpParam: {
				type: Object,
				default: function() {
					return {}
				}
			},
			list: {
				type: Array,
				default: function() {
					return []
				}
			},
		},
		data() {
			return {
				canIUseGetUserProfile: true,
				appinfo: {
					'logo': this.configApi.logo,
					'name': this.configApi.name
				},
				loginProvider: '',
				btnText: '授权登录',
				userInfo: {},
				footer: {},
				prompt: {},
				onClick: false,
			};
		},
		methods: {
			async loginByWeixin(result) {
				this.onClick = true
				console.log(result, "点击按钮返回用户的参数")
				let that = this
				let provider = this.loginProvider;
				if (result.errMsg !== 'getUserProfile:ok') {
					uni.showModal({
						title: '授权登录失败',
						content: '错误原因' + result.errMsg,
						showCancel: false
					});
				} else {
					uni.getProvider({
						service: 'oauth',
						success: function(pro) {
							console.log("-=-==-==-=-pro.provider" + pro.provider)
							uni.login({
								scopes: ["auth_base"],
								provider: pro.provider[0],
								success: function(res) {
									console.log('登录成功的回调', res)
									that.$u.post('/login', {
										code: res.code,
										provider: pro.provider[0]
									}, '').then(res => {
										console.log(res, "+-----------login")
										that.$u.vuex('vuex_token', res.token);
										// that.$emit('authConfirm', true);
										if (res.new) {
											if (!that.$u.test.isEmpty(that.userInfo)) {
												that.$u.vuex('vuex_user', {
													'nickname': res.nickname,
													'openid': res.openid
												});
												that.userInfo['openid'] = res.openid
												setTimeout(function() {
													that.toUserReg(that
														.userInfo, );
												}, 500)
											} else {
												uni.showModal({
													title: '授权登录失败',
													content: '请重新授权',
													showCancel: false
												});
												that.$emit('authConfirm', true);
											}
										} else {
											that.$emit('authConfirm', true);
										}
									}).catch(err => {
										console.log(err, "err")
										uni.showToast({
											title: "远端服务不可用~",
											icon: "none"
										});
									});
								},
								fail(err) {
									console.log('login:', error);
								}
							});
						}
					});
				}
			},
			// 微信登录以及抖音登录
			getUserProfile() {
				let that = this;
				let provider = that.loginProvider;
				uni.getUserProfile({
					desc: 'weixin',
					success: function(infoRes) {
						if (infoRes.errMsg == 'getUserProfile:ok') {
							that.userInfo = infoRes;
							uni.setStorage({
								key: 'userInfo',
								data: infoRes.userInfo,
								success: function() {
									that.isAuthShow = false
									that.loginByWeixin(infoRes);
								}
							});
							// that.$emit('authConfirm', true);
						} else {
							that.$emit('authConfirm', false);
						}
					},
					fail(err) {
						console.log('get_user_info:', err);
					}
				});
			},
			// 支付宝
			getUserInfo() {
				let provider = this.loginProvider;
				let that = this;
				uni.getUserInfo({
					provider: provider,
					success: function(infoRes) {
						console.log('infoRes', infoRes)
						if (infoRes.errMsg == 'getUserInfo:ok') {
							that.userInfo = JSON.parse(infoRes.response);
							console.log(that.userInfo);
							uni.getProvider({
								service: 'oauth',
								success: function(pro) {
									console.log("-=-==-==-=-" + pro.provider)
									uni.login({
										scopes: ["auth_base"],
										provider: pro.provider[0],
										success: function(res) {
											console.log('登录成功的回调', res)
											that.$u.post('/login', {
												code: res.code,
												provider: pro.provider[0]
											}, '').then(res => {
												console.log(res,
													"+-----------login")
												that.$u.vuex('vuex_token', res
													.token);
												// that.$emit('authConfirm', true);
												console.log("111111111111111",
													res);
												if (res.new) {
													if (!that.$u.test.isEmpty(
															that.userInfo)) {
														that.$u.vuex(
															'vuex_user', {
																'nickname': res
																	.nickname,
																'openid': res
																	.openid
															});
														console.log("5555555",
															that.userInfo);
														that.userInfo[
																'openid'] = res
															.openid
														const {
															openid,
															response
														} = that.userInfo;
														that.userInfo = {
															openid,
															...response
														};
														that.isAuthShow = false
														setTimeout(function() {
															that.toUserReg(that.userInfo);
														}, 500)
													} else {
														uni.showModal({
															title: '授权登录失败',
															content: '请重新授权',
															showCancel: false
														});
														that.$emit(
															'authConfirm',
															true);
													}
												} else {
													that.$emit('authConfirm',
														true);
												}
											}).catch(err => {
												console.log(err, "err")
												uni.showToast({
													title: "远端服务不可用~",
													icon: "none"
												});
											});
										},
										fail(err) {
											console.log('login:', error);
										}
									});
								}
							});



							uni.setStorage({
								key: 'userInfo',
								data: infoRes.userInfo,
								success: function() {}
							});
							// that.$emit('authConfirm', true);
						} else {
							that.$emit('authConfirm', false);
						}
					},
					fail(err) {
						console.log('get_user_info:', err);
					}
				});
			},
			toUserReg(data) {
				let that = this;
				console.log("1111111115454854857487", data);
				// #ifdef MP-TOUTIAO
				data.rawData =  JSON.parse(data.rawData)
				console.log("我是data", data);
				// #endif
				// let { openid, response: { avatar, City,code, countryCode,gender,msg,nickName,province} } = data;

				this.$u.post('/complex', data, '').then(res => {
					console.log("-------------------------", res)
					if (res.code == 200) {
						that.$u.vuex('vuex_user', {
							nickname: res.nickname,
							openid: res.openid
						});
						that.$emit('authConfirm', true);
					} else {
						that.$emit('authConfirm', false);
					}
				}).catch(err => {
					console.log(err, "错误！！！")
				})
			},
			getProvider() {
				uni.getProvider({
					service: 'oauth',
					success: (result) => {
						result.provider.map((value) => {
							this.loginProvider = value
							console.log(this.loginProvider, "这是？？？？")
						});
					},
					fail: (error) => {
						console.log('获取登录通道失败', error);
					}
				});
			},
			callback() {
				this.$emit('confirm', this);
			},
			cancelAuth() {
				this.$refs.uToast.show({
					title: '请先授权登录哟~',
					type: 'error'
				})
				//TODO 记录放弃授权
				this.$emit('cancel', false)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		background-color: #FFFFFF;
		justify-content: flex-start;
		margin-bottom: 20rpx;
	}

	.canceBtn {
		display: flex;
		justify-content: center;
		padding: 20rpx;
		color: $u-type-primary-dark;
		font-size: 28rpx;
		border-radius: 10rpx;
	}

	.logo-box {
		display: flex;
		flex-direction: column;
		margin-top: 60rpx;

		image {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			display: block;
			margin: 0 auto;
		}
	}

	.title {
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
		color: #333;
	}

	.wxaubtn {
		flex: 0;
		width: 80%;
		margin: 20rpx auto;

		button {
			background-color: #19BE6B;
			color: #FFFFFF;
		}
	}

	.show-text-box {
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		text-align: center;

		.text-name {
			font-size: 30rpx;
			color: #333;
		}

		.text-info {
			font-size: 24rpx;
			color: #999;
			margin-top: 10rpx;
		}
	}
</style>
